<!--
 * @Date: 2022-08-04 16:29:35
 * @LastEditors: StavinLi
 * @LastEditTime: 2022-09-21 11:25:18
 * @FilePath: /Workflow/src/components/dialog/roleDialog.vue
-->
<template>
   <el-dialog title="选择成员" :visible.sync="isMemberDialog" width="900px" append-to-body class="promoter_person">
    <div class="box">
      <div class="left_box">
        <el-input
          class="search_personnel"
          placeholder="输入关键字进行过滤"
          v-model="filterText">
        </el-input>
        <p class="titie_name">组织架构</p>
        <el-tree
          class="filter-tree"
          :data="personnelData"
          :props="defaultProps"
          default-expand-all
          :filter-node-method="filterNode"
          show-checkbox
          @check-change="handleCheckChange"
          @node-click="nodeClick"
          check-on-click-node
          node-key="id"
          ref="tree">
        </el-tree>
      </div>
      <div class="cen_box">
        <p class="titie_name">选择成员</p>
        <el-checkbox-group v-model="perList">
          <p class="checkbox_box" v-for="item in dataList"  :key="item.id">
            <el-checkbox :label="item.id">{{item.name}}</el-checkbox>
          </p>
          
        </el-checkbox-group>
      </div>
      <div class="right_box">
        <div class="ri_top">
          <span>已选({{perList.length}})</span>
          <span class="close" @click="clear" >清空</span>
        </div>
        <div class="ri_cen">
          <div class="cen_list" v-for="(item,index) in xzperList" :key="item.id">
            <span>{{item.name}}</span>
            <span class="el-icon-circle-close close" @click="setCheckedKeys1(item,index)"></span>
          </div>
        </div>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="isMemberDialog = false">取 消</el-button>
      <el-button type="primary" @click="saveDialog">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {mapState} from 'vuex'
// import { getDeptPersonTree } from './getDeptPersonTree.js'
import { getDeptPersonTree } from "@/plugins/api.js";



// import { regular } from "@/plugins/api.js";
export default {
  
  props: [ 'data','type',"transmitIdList","roleInfoList"],
  watch: {
    
    filterText(val) {
      this.$refs.tree.filter(val);
    },
    
    isMemberDialog(newVal){
      let that = this
      if(that.transmitIdList&&that.transmitIdList.length>0){
        setTimeout(()=>{
          that.$refs.tree.setCheckedKeys(that.transmitIdList);
        },10)
        
      }else{
        setTimeout(()=>{
          that.$refs.tree.setCheckedKeys([]);
        },10) // 不加这个，刚进来找不到tree，原因不明
        
      }
      
      let list = []
      this.roleInfoList.forEach(item =>{
        list.push(item.id)
      })
      this.perList = list
    },
    dataList(newVal){
      this.xzperList = []
      this.perList.forEach(item =>{
        this.dataList.forEach(o =>{
          if(o.id==item){
            this.xzperList.push(o)
          }
        })
        
        
      })
    },
    perList(newVal){
      this.xzperList = []
      this.perList.forEach(item =>{
        this.dataList.forEach(o =>{
          if(o.id==item){
            this.xzperList.push(o)
          }
        })
        
        
      })
    }
  },
  computed: {
    // ...mapState({
    //   personnelData: state =>state.personnelData
    // }),
   
    
  },
  
  data() {
    return {
      checkedRoleList: [],
      isMemberDialog:false,
      filterText: '',
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      selectList: [],
      perList:[],
      dataList:[],
      personnelData:[],
      xzperList:[]
    }
  },
  created(){
    getDeptPersonTree().then((res)=>{
      if(res.code==0){
        this.personnelData = res.data
      }
      
    })
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    
    delList() {
      this.checkedRoleList = [];
    },
    handleCheckChange(data,isSelected){
      if(isSelected){
        if(!data.children||data.children.length==0){
          this.selectList.push(data)
        }
        if(data.person){
          this.dataList = this.dataList.concat(data.person)
          console.log(data.person,666)
        }
        
      }else{
        this.selectList.forEach((item,index)=>{
          if(item.id==data.id){
            this.selectList.splice(index,1)
          }
          
        })
        data.person.forEach(it=>{
          this.dataList.forEach((item,index)=>{
            if(it.id==item.id){
              this.dataList.splice(index,1)
            }
            
          })
        })
        
      }
    },
    nodeClick(data,isSelected){
      console.log(data,'---------data----------')
      console.log(isSelected,'------------isSelected----------')

    },
    setCheckedKeys1(item,index){
      this.perList.splice(index,1)
      console.log(item.id)
      // let idList = []
      // this.perList.forEach((item)=>{
      //   idList.push(item.id)
      // })
      // this.$refs.tree.setCheckedKeys(idList);
      // this.$refs.tree.setCheckedKeys([]);
    },
    clear(){
      this.selectList=[]
      this.perList = []
      this.$refs.tree.setCheckedKeys([]);
    },
    saveDialog(){
      console.log( JSON.stringify(this.selectList) ,'---------保存选人---------')
      this.$emit('selectList',JSON.parse(JSON.stringify(this.xzperList)),JSON.parse(JSON.stringify(this.selectList)))
      this.isMemberDialog = false
    }
  }
}
</script>

<style scoped>
@import "../../css/dialog.css";
.box{
  display: flex;
}
.left_box{
  width: 35%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
  max-height: 400px;
  overflow: auto;
}
.search_personnel{
  margin-bottom: 20px;
}
/deep/ .el-tree-node__content{
  margin-bottom: 5px;
}
.cen_box{
  width: 35%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
  max-height: 400px;
  overflow: auto;
  
}
.right_box{
  width: 30%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
  max-height: 400px;
  overflow: auto;
}
.ri_top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  line-height: 40px;
  font-size: 14px;
}
.cen_list{
  line-height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.close{
  cursor: pointer;
  font-size: 16px;
  color: rgb(45, 119, 230);
}
.titie_name{
  color: rgb(45, 119, 230);
  font-size: 16px;
  line-height: 40px;
}
</style>